<template>
  <div class="header">
    <div>
      <div class="logo">
        <img src="@/assets/logo.png" alt="" width="180" />
      </div>
      <div class="weather-box" v-if="weather.length">
        <el-popover
          placement="bottom-start"
          trigger="hover"
          width="900"
          @after-leave="clearInput"
        >
          <div class="search-box">
            <el-input
              placeholder="请输入城市名"
              v-model="input"
              clearable
              prefix-icon="el-icon-search"
              @keypress.native.enter="handleSearch"
              style="margin-bottom: 10px"
            >
            </el-input>
            <el-button type="primary" plain @click="handleSearch"
              >搜索</el-button
            >
          </div>
          <div class="week-weather">
            <el-card
              :body-style="{ padding: '0px' }"
              v-for="item in weather"
              :key="item.date"
            >
              <img :src="item.weather" alt="" width="48" />
              <div style="padding: 14px">
                <div class="bottom clearfix">
                  <p>{{ item.date }}</p>
                  <p>
                    {{ item.temp }}
                  </p>
                </div>
              </div>
            </el-card>
          </div>
          <div class="city" slot="reference">
            <p><i class="el-icon-location"></i> {{ city }}</p>
            <p>近日天气</p>
          </div>
        </el-popover>
        <div class="weather">
          <img :src="weather[0].weather" alt="" width="48" />
          <div class="weather-text">
            <p>{{ weather[0].date }}</p>
            <p>
              {{ weather[0].temp }}
            </p>
          </div>
        </div>
        <div class="weather">
          <img :src="weather[1].weather" alt="" width="48" />
          <div class="weather-text">
            <p>{{ weather[1].date }}</p>
            <p>
              {{ weather[1].temp }}
            </p>
          </div>
        </div>
      </div>
      <div class="login">
        <el-button
          type="primary"
          size="mini"
          plain
          v-if="toggle"
          @click="showLoginDialog()"
          >登录账号</el-button
        >
        <div v-else style="display: flex">
          <div style="margin-top: 5px">
            <UploadAvatar v-if="avatarToggle"></UploadAvatar>
          </div>
          <p style="color: #606266">{{ username }} , 欢迎登录</p>
          <el-popconfirm
            title="您确定要退出登录吗？"
            @cancel="$message.info('已取消')"
            @confirm="logout"
          >
            <el-button
              slot="reference"
              type="primary"
              size="mini"
              plain
              style="margin-left: 20px"
              >退出登录</el-button
            >
          </el-popconfirm>
        </div>
      </div>
    </div>
    <Login></Login>
    <Register></Register>
    <ForgetPassword></ForgetPassword>
  </div>
</template>

<script>
import axios from "axios";
import { weatherImg } from "@/utils/weather.js";
import { mapState, mapMutations } from "vuex";
import Register from "@/components/Register.vue";
import Login from "@/components/Login.vue";
import ForgetPassword from "@/components/ForgetPassword.vue";
import UploadAvatar from "@/components/UploadAvatar.vue";

export default {
  components: {
    Register,
    Login,
    ForgetPassword,
    UploadAvatar,
  },
  data() {
    return {
      city: "武汉",
      weather: [], // 天气列表
      input: "", // 城市搜索框
      imgUrl: require("@/assets/default-avatar.png"), //默认头像
      username: "",
      toggle: true,
      avatarToggle: true,
    };
  },
  watch: {
    avatar() {
      this.avatarToggle = false;
    },
    avatarToggle() {
      this.avatarToggle = true;
    },
  },
  computed: {
    ...mapState([
      "loginDialogFormVisible",
      "registerDialogFormVisible",
      "isCollapse",
      "avatar",
    ]),
  },
  created() {
    this.getWeather();
  },
  mounted() {
    this.username = window.sessionStorage.getItem("username");
    if (window.sessionStorage.getItem("username")) {
      this.toggle = false;
    }
  },
  methods: {
    ...mapMutations([
      "showLoginDialog",
      "hideLoginDialog",
      "showRegisterDialog",
      "hideRegisterDialog",
      "changeAvatar",
    ]),
    // 获取天气列表
    async getWeather() {
      const { data: res } = await axios.get(
        "/weather/baidu?city=" + this.input
      );
      this.city = res.city;
      res.weather.map((item) => (item.weather = weatherImg(item.weather)));
      // console.log(res.weather);
      this.weather = res.weather;
    },
    // 搜索城市  搜索不到默认返回北京的天气
    handleSearch() {
      this.getWeather();
    },
    // 气泡消失时清空输入框
    clearInput() {
      this.input = "";
    },
    // 退出登录
    logout() {
      window.sessionStorage.clear();
      this.$message.success("退出登录成功!");
      location.reload();
      this.$router.push("/");
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  color: #000;
}

.header > div {
  padding: 0 100px;
  display: flex;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;

  p {
    margin-left: 10px;
  }
}

::v-deep .el-card__body {
  text-align: center;
}

.week-weather {
  display: flex;
  justify-content: space-between;
}

.search-box {
  display: flex;

  .el-button {
    height: 40px;
  }
}

.weather-box {
  display: flex;

  .city {
    height: 60px;
    line-height: 35px;

    p:last-of-type {
      line-height: 15px;
    }
  }

  .weather {
    display: flex;
    align-items: center;
    margin-left: 25px;
    height: 60px;
    line-height: 20px;

    img {
      margin-right: 8px;
    }

    .weather-text {
      font-size: 14px;
    }
  }
}

.login {
  height: 60px;
  line-height: 60px;

  > p {
    margin: auto;
    width: max-content;
  }

  > p:hover {
    color: #409eff;
    cursor: pointer;
    text-decoration: underline;
  }
}
</style>
